<template>
  <div>
    <Head />
    <div class="Topic_content">
      <div class="Topic_right">
        <AuthorInformation :user="data.user" :title="'作者'"/>
        <UserTopic :id="data.user.id" />
        <UnansweredTopic />
      </div>
      <div class="Topic_left">
        <div class="Topic_left_top">
          <p>
            <span class="Topic_left_top_span" v-if="data.is_top == 1"
              >置顶</span
            >
            <span
              class="Topic_left_top_span"
              v-if="data.is_top != 1 && tab == '0'"
              >精选</span
            >
            <span class="Topic_left_top_title">{{ data.title }}</span>
          </p>
          <p class="Topic_left_top_p">
            <span>发布于&nbsp;{{ analysisTime(data.created_at) }}</span>
            <span
              >作者&nbsp;
              <router-link
                :to="'/user/' + data.user.username"
                class="Topic_left_top_p_name"
                >{{ data.user.username }}</router-link
              >
            </span>
            <span>{{ data.view_count }}&nbsp;次浏览</span>
            <span>来自&nbsp;{{ data.categorie.name }}</span>
          </p>
        </div>
        <div class="Topic_left_content">
          <Markdown :content="data.article_contents[0].content" />
        </div>
        <div class="Topic_left_replie">
          <Replies :replies="data.replies" :id="data.user.id" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Head.vue"; //头部
import AuthorInformation from "@/components/AuthorInformation.vue"; //作者信息
import UserTopic from "@/components/UserTopic.vue"; //作者其他话题
import UnansweredTopic from "@/components/UnansweredTopic.vue"; //为回复话题
import Markdown from "@/components/Markdown.vue"; //内容
import Replies from "@/components/Replies.vue"; //评论
export default {
  name: "Topic",
  components: {
    Head,
    AuthorInformation,
    UserTopic,
    UnansweredTopic,
    Markdown,
    Replies,
  },
  data() {
    return {
      tab: 0,
      data: {
        article_contents: [{ content: "" }],
        categorie: {},
        user: {},
        replies: [],
      },
    };
  },
  methods: {
    getArticleContent() {
      this.axios
        .get("/get/article/content?id=" + this.$route.params.id)
        .then((res) => {
          this.data = res.data.results;
          // console.log(this.data);
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.message);
        });
    },
    ll(v) {
      console.log(v);
    },
    analysisTime(time) {
      const _d1 = new Date();
      const dateDiffer = Math.abs(_d1.getTime() - time);
      //准换年
      const year = Math.floor(dateDiffer / (1000 * 60 * 60 * 24 * 365));
      //取余数
      const years = dateDiffer % (1000 * 60 * 60 * 24 * 365);
      //将余数转换成月
      const month = Math.floor(years / (1000 * 60 * 60 * 24 * 30));
      //将余数转换成天
      const day = Math.floor(years / (1000 * 60 * 60 * 24));
      //取余数
      const hours = years % (1000 * 60 * 60 * 24);
      //将余数转换小时
      const hour = Math.floor(hours / (1000 * 60 * 60));
      // console.log(year,month,day,hour);
      if (year > 0) {
        return year + "年前";
      } else if (month > 0) {
        return month + "个月前";
      } else if (day > 0) {
        return day + "天前";
      } else if (hour > 0) {
        return hour + "小时前";
      } else {
        return "1小时之前";
      }
    },
  },
  created() {
    this.getArticleContent();
    this.tab = this.$route.params.tab;
  },
};
</script>

<style>
.Topic_content {
  padding-top: 15px;
  width: 90%;
  margin: auto;
  border-radius: 3px;
}
.Topic_left {
  margin-right: 305px;
}
.Topic_right {
  float: right;
  width: 290px;
}
.Topic_left_top {
  border-bottom: 1px solid #e1e1e1;
  padding: 20px 10px 0 10px;
  background: #fff;
  border-radius: 3px 3px 0 0;
}
.Topic_left_top_span {
  background: #80bd01;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  color: #fff;
  margin-right: 5px;
  font-size: 12px;
}
.Topic_left_top_title {
  font-size: 22px;
  font-weight: bolder;
  width: 75%;
}
.Topic_left_top_p {
  line-height: 40px;
  color: #808080;
  font-size: 12px;
}
.Topic_left_top_p span {
  margin-right: 4px;
}
.Topic_left_top_p span::before {
  content: "•";
}
.Topic_left_top_p_name {
  color: #808080;
}
.Topic_left_top_p_name:hover {
  text-decoration: underline;
}
.Topic_left_content {
  margin-bottom: 13px;
}
@media screen and (max-width: 980px) {
  .Topic_right {
    display: none;
  }
  .Topic_left {
    width: 100%;
  }
  .head_ul {
    clear: both;
    float: none;
  }
  .Topic_content {
    width: 98%;
  }
}
</style>